<template>
  <SelectTrigger label="加载gltf" :options="options" width="350px" />
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示gltf文件的加载

 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";

const options = ref([]);
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";

  options.value = [
    {
      text: "加载gltf-Entity方式",
      onselect: async function () {
        // return;
        const position = Cesium.Cartesian3.fromDegrees(-120.05, 44, 0); // 经纬度转笛卡尔坐标
        const heading = Cesium.Math.toRadians(45); // 角度转弧度
        const pitch = 0;
        const roll = 0;
        const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll); // 偏转角
        const orientation = Cesium.Transforms.headingPitchRollQuaternion(
          position,
          hpr
        ); // 方位角
        console.log(orientation);
        const gltfEntity = viewer.entities.add({
          name: "gltf模型",
          position: position,
          orientation: orientation, // 模型方位，默认向东
          label: {
            text: "Entity方式",
            pixelOffset: new Cesium.Cartesian2(0, -150),
          },
          model: {
            show: true,
            uri: "/cesiumData/models/DracoCompressed/CesiumMilkTruck.gltf",
            scale: 1.0, // 缩放比例
            minimumPixelSize: 128, // 最小像素大小
            maximumScale: 20000, // 模型的最大比例尺大小。 minimumPixelSize的上限
            incrementallyLoadTextures: true, // 加载模型后纹理是否可以继续流入
            runAnimations: true, // 是否应启动模型中指定的glTF动画
            clampAnimations: true, // 指定glTF动画是否应在没有关键帧的持续时间内保持最后一个姿势
            // 指定模型是否投射或接收来自光源的阴影 type:ShadowMode
            // DISABLED	对象不投射或接收阴影;ENABLED 对象投射并接收阴影;CAST_ONLY	对象仅投射阴影;RECEIVE_ONLY	对象仅接收阴影
            shadows: Cesium.ShadowMode.ENABLED,
            heightReference: Cesium.HeightReference.NONE,
          },
        });
        // viewer.trackedEntity = gltfEntity;
        viewer.zoomTo(gltfEntity);
      },
    },
    {
      text: "加载gltf-Primitive方式",
      onselect: async function () {
        try {
          viewer.entities.removeAll();
          const origin = Cesium.Cartesian3.fromDegrees(-120, 44.0, 0);
          // 创建一个本地的东北向上坐标系，其原点为经度-120度，纬度44.0度。
          // 可以随时更改模型的modelMatrix属性以移动或旋转模型。
          const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
          const gltfModel = await Cesium.Model.fromGltfAsync({
            url: "/cesiumData/models/DracoCompressed/CesiumMilkTruck.gltf",
            modelMatrix: modelMatrix,
            minimumPixelSize: 128,
            maximumScale: 20000,
          });
          console.log("gltfModel", gltfModel);
          const model = viewer.scene.primitives.add(gltfModel);
          model.readyEvent.addEventListener((model) => {
            console.log("模型加载完成");
            const center = model.boundingSphere.center;
            const heading = Cesium.Math.toRadians(230.0);
            const pitch = Cesium.Math.toRadians(-20.0);
            viewer.camera.lookAt(
              center,
              new Cesium.HeadingPitchRange(heading, pitch, 200.0)
            );
          });
        } catch (e) {
          console.error(e);
        }
      },
    },
    {
      text: "加载kml-路线",
      onselect: async function () {},
    },
  ];
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
